<template>
  <scroll-view class="container" scroll-y="true">
    <!-- 顶部背景图区域 -->
    <view class="background-container" :style="{ backgroundImage: `url(${currentBackground})` }">
      <!-- 用户信息：头像 + 名称 -->
      <view class="user-info">
        <view class="avatar-container">
          <image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
        </view>
        <text class="user-name">用户名用户名用户名</text>
      </view>
    </view>

    <!-- 会员中心盒子（蓝色信息栏） -->
    <view class="member-box">
      <view class="title">
        <text>会员中心</text>
        <text>立享多重权益</text>
      </view>
      <view class="tab">
        <view class="item" v-for="item in memberItems" :key="item.text" @click="handleMemberItemClick(item)">
          <image v-if="item.icon" :src="item.icon" class="item-icon"></image>
          <text>{{ item.num }}</text>
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 菜单 -->
    <view class="service-list">
      <view 
          class="service-item" 
          v-for="(item, index) in allServices" 
          :key="index"
          @click="handleServiceClick(item)"
      >
      <view class="left">
          <view class="service-icon" :class="item.class">
              <uni-icons :type="item.icon" size="20" color="#fff"></uni-icons>
          </view>
          <text class="service-name">{{ item.name }}</text>
          </view>
          <view class="right">
              <text v-if="item.desc" class="desc">{{ item.desc }}</text>
              <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
      </view>
    </view>
    
    <!-- 主题切换弹窗 -->
    <view class="theme-modal" v-if="showThemeModal">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">选择背景图片</text>
          <text class="close-btn" @click="closeThemeModal">×</text>
        </view>
        <view class="image-grid">
          <view 
            class="image-item" 
            v-for="(image, index) in backgroundImages" 
            :key="index"
            @click="selectBackgroundImage(image)"
          >
            <image :src="image" mode="aspectFill" class="thumbnail"></image>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 扫描结果弹窗 -->
    <view class="scan-modal" v-if="showScanModal">
        <view class="modal-content">
            <view class="modal-header">
              <text class="modal-title">扫描结果</text>
              <text class="close-btn" @click="showScanModal = false">×</text>
            </view>
            <view class="modal-body">
              <text>{{ scanResult }}</text>
            </view>
        </view>
    </view>
    
    <!-- 退出登录确认弹窗 -->
    <view class="logout-modal" v-if="showLogoutModal">
      <view class="modal-mask" @click="showLogoutModal = false"></view>
      <view class="logout-content">
        <view class="logout-header">
          <text class="logout-title">退出登录</text>
        </view>
        <view class="logout-body">
          <text class="logout-text">确定要退出登录吗</text>
        </view>
        <view class="logout-footer">
          <view class="btn-container">
            <view class="cancel-btn" @click="showLogoutModal = false">取消</view>
            <view class="confirm-btn" @click="handleLogout">确定</view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref } from 'vue';

const showScanModal = ref(false);
const showThemeModal = ref(false);
const showLogoutModal = ref(false);
const scanResult = ref('');
const address = ref(''); // 模拟地址数据

// 背景图片URL
const currentBackground = ref('https://ts1.tc.mm.bing.net/th/id/R-C.59620170afedc7d6090190d5cf5abcdb?rik=P%2fuPsqBbZgd3wg&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20110%2f569%2fw1920h1049%2f20190508%2fb663-hwsffza7768772.jpg&ehk=8%2fyKugFFySraMu0bPAwi%2bjmN7%2fsMJg6huhPbPqHZQj0%3d&risl=&pid=ImgRaw&r=0   ');

// 用户头像URL
const avatarUrl = '/static/logo.png';

// 会员数据
const memberItems = ref([
  {
    num: '',
    text: '会员权利',
    icon: '/static/mine/crown-fill.png',
    path: '/pages/mine/membership'
  },
  {
    num: '',
    text: '充值中心',
    icon: '/static/mine/c.png',
    path: '/pages/mine/recharge'
  },
  { num: '0', text: '我的卡券' },
  { num: '0', text: '账户余额' }
]);

// 菜单
const allServices = ref([
  { name: '客服中心', icon: 'headphones', path: '/pages/mine/service', class: 'bg-orange', desc: '在线客服' },
  { name: '主题切换', icon: 'image', path: '', class: 'bg-green' },
  { name: '今日天气', icon: 'fire-filled', path: '/pages/mine/weather', class: 'bg-blue' },
  { name: '每日一签', icon: 'calendar', path: '/pages/mine/sign', class: 'bg-purple' },
  { name: '扫一扫', icon: 'scan', path: '', class: 'bg-pink' },
  { name: '设置用户', icon: 'gear', path: '/pages/mine/setting', class: 'bg-cyan' },
  { name: '退出登录', icon: 'circle-filled', path: '', class: 'bg-gray' }
]);

// 处理会员中心项点击
const handleMemberItemClick = (item) => {
  if (item.path) {
    uni.navigateTo({ url: item.path });
  }
};

// 处理菜单项点击
const handleServiceClick = (item) => {
  if (item.name === '主题切换') {
    showThemeModal.value = true;
  } else if (item.name === '扫一扫') {
    scanQRCode();
  } else if (item.name === '今日天气') {
    if(address.value) {
      uni.navigateTo({ url: item.path });  
    } else {
      uni.showModal({
        title: "你还没有添加地址，请先进行添加地址",
        icon: "none",
        showCancel: true,
        success: function (res) {
            if (res.confirm) {
                uni.navigateTo({
                    url: "/pages/mine/address"
                });
            }
        }
      });
    }
  } else if (item.name === '退出登录') {
    showLogoutModal.value = true;
  } else if (item.path && item.path !== '') {
    uni.navigateTo({ url: item.path });
  }
};

// 处理退出登录
const handleLogout = () => {
  showLogoutModal.value = false;
  // 这里添加退出登录的实际逻辑
  uni.showToast({
    title: '已退出登录',
    icon: 'none'
  });
  // 模拟退出后跳转到登录页
  setTimeout(() => {
    uni.reLaunch({
      url: '/pages/login/login'
    });
  }, 1000);
};

// 背景图片数组
const backgroundImages = ref([
  'https://cdn.acwing.com/media/article/image/2024/01/25/181746_655312d3bb-0125_1.jpg   ',
  'https://n.sinaimg.cn/sinacn20110/567/w1915h1052/20190508/fd26-hwsffza7768851.jpg   ',
  'https://img.keaitupian.cn/newupload/09/1631526070533748.jpg   ',
  'https://img-baofun.zhhainiao.com/fs/3fc54f2b553dc552c23fd2df0ee0159e.jpg   ',
  'https://ts1.tc.mm.bing.net/th/id/R-C.55545cd6eb6d7bbd1a467442f0d50e66?rik=mD5kUtHuPyeNKQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20110%2f600%2fw1920h1080%2f20190508%2fc057-hwsffza7769015.jpg&ehk=bM12hqHX6tE5Xri6kFH1Lez67AhXyjq6jVBcJN8GUxY%3d&risl=&pid=ImgRaw&r=0   ',
  'https://tse1-mm.cn.bing.net/th/id/OIP-C.N4_UfpgbbE8lcul8o2nuvQHaEm?cb=iwp2&rs=1&pid=ImgDetMain   ',
  'https://n.sinaimg.cn/sinacn20110/580/w1920h1060/20190508/092f-hwsffza7769165.jpg   ',
  'https://cdn.acwing.com/media/article/image/2024/01/25/181746_a6f7a892bb-0125_13.jpg   ',
  'https://ts1.tc.mm.bing.net/th/id/R-C.59620170afedc7d6090190d5cf5abcdb?rik=P%2fuPsqBbZgd3wg&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20110%2f569%2fw1920h1049%2f20190508%2fb663-hwsffza7768772.jpg&ehk=8%2fyKugFFySraMu0bPAwi%2bjmN7%2fsMJg6huhPbPqHZQj0%3d&risl=&pid=ImgRaw&r=0   '
]);

// 选择背景图片
const selectBackgroundImage = (image) => {
  currentBackground.value = image;
  showThemeModal.value = false;
};

// 关闭主题切换弹窗
const closeThemeModal = () => {
  showThemeModal.value = false;
};

// 扫描二维码
const scanQRCode = () => {
  uni.scanCode({
    success: (res) => {
      scanResult.value = res.result;
      showScanModal.value = true;
    },
    fail: (err) => {
      console.error('扫码失败:', err);
      uni.showToast({
        title: '扫码失败，请重试',
        icon: 'none'
      });
    },
    complete: () => {
      uni.hideLoading();
    }
  });
};

</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: #f5f5f5;
  
  /* 去掉滚动条 */
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* 顶部背景图容器 */
  .background-container {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 0 0 30px 30px;
    overflow: hidden;
    
    /* 用户信息 */
    .user-info {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1;
      
      .avatar-container {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        overflow: hidden;
        border: 3rpx solid #fff;
        box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.2);
        margin-bottom: 15rpx;
        
        .avatar {
          width: 100%;
          height: 100%;
        }
      }
      
      .user-name {
        color: #fff;
        font-size: 32rpx;
        font-weight: 500;
        text-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.3);
        white-space: nowrap;
      }
    }
  }

  /* 会员中心盒子：向上偏移并与背景图衔接 */
  .member-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 170px;
    width: 90%;
    background: #182D4E;
    border-radius: 16rpx;
    color: #D8B774;
    box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.1);
    z-index: 2;
    
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15rpx 25rpx;
      
      text {
        font-weight: bold;
        
        &:nth-child(1) {
          font-size: 16px;
        }
        
        &:nth-child(2) {
          font-size: 12px;
          color: rgba(216, 183, 116, 0.8);
        }
      }
    }
    
    .tab {
      display: flex;
      justify-content: space-between;
      padding: 15rpx 20rpx;
      
      .item {
        width: 25%;
        height: 100rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
        
        &:active {
          background: rgba(255, 255, 255, 0.05);
        }
        
        .item-icon {
          width: 40rpx;
          height: 40rpx;
          margin-bottom: 10rpx;
        }
        
        text {
          &:first-child {
            font-size: 16px;
            font-weight: bold;
          }
          
          &:last-child {
            margin-top: 5rpx;
            font-size: 12px;
            color: rgba(216, 183, 116, 0.8);
          }
        }
      }
    }
  }

  /* 内容容器 */
  .content-container {
    padding-top: 140rpx;
    padding-bottom: 100rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
  }
  
  /* 菜单列表 */
  .service-list {
    background: #fff;
    border-radius: 24rpx;
    margin: 65px 15rpx 0;
    padding: 10rpx 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
    padding-bottom: 50px;
  
    .service-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 0;
      border-bottom: 2rpx solid #f5f6fa;
  
      &:last-child {
        border-bottom: none;
      }
  
      .left {
        display: flex;
        align-items: center;
  
        .service-icon {
          width: 64rpx;
          height: 64rpx;
          border-radius: 32rpx;
          margin-right: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
  
        .service-name {
          font-size: 28rpx;
          color: #333;
        }
      }
  
      .right {
        display: flex;
        align-items: center;
  
        .desc {
          font-size: 24rpx;
          color: #999;
          margin-right: 16rpx;
        }
      }
    }
  }
  
  /* 颜色类 */
  .bg-red { background: #ff4d4f; }
  .bg-blue { background: #1890ff; }
  .bg-green { background: #52c41a; }
  .bg-purple { background: #722ed1; }
  .bg-orange { background: #fa8c16; }
  .bg-cyan { background: #13c2c2; }
  .bg-pink { background: #eb2f96; }
  .bg-gray { background: #666666; }
}

/* 弹窗公共样式 */
.theme-modal, .scan-modal, .logout-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.theme-modal .modal-mask, .scan-modal .modal-mask, .logout-modal .modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

/* 退出登录弹窗样式 */
.logout-content {
  position: relative;
  background: #fff;
  border-radius: 24rpx;
  width: 80%;
  max-width: 500rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.logout-header {
  padding: 40rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2rpx solid #f5f6fa;
}

.logout-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.logout-body {
  padding: 30rpx 40rpx;
  text-align: center;
}

.logout-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.logout-footer {
  padding: 30rpx 40rpx;
  display: flex;
  justify-content: center;
}

.btn-container {
  display: flex;
  width: 100%;
  gap: 20rpx;
}

.cancel-btn, .confirm-btn {
  flex: 1;
  padding: 20rpx 0;
  border-radius: 40rpx; /* 大圆角 */
  text-align: center;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.3s;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
  border: 1rpx solid #ddd;
}

.cancel-btn:active {
  background: #f0f0f0;
}

.confirm-btn {
  background: #ff4d4f;
  color: #fff;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3);
}

.confirm-btn:active {
  background: #ff6b6b;
  box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
  transform: translateY(2rpx);
}

/* 其他弹窗样式 */
.theme-modal .modal-content, .scan-modal .modal-content {
  background: #fff;
  border-radius: 16rpx;
  width: 80%;
  max-height: 70%;
  overflow: hidden;
}

.theme-modal .modal-header, .scan-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 2rpx solid #f5f6fa;

  .modal-title {
    font-size: 32rpx;
    font-weight: 600;
  }

  .close-btn {
    font-size: 40rpx;
    font-weight: bold;
  }
}

.theme-modal .image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 30rpx;
  max-height: 60%;
  overflow-y: auto;

  .image-item {
    .thumbnail {
      width: 100%;
      height: 160rpx;
      border-radius: 16rpx;
    }
  }
}

.modal-body {
  text-align: center;
  padding: 20rpx 0;
}
</style>    